<template>
  <div class="header">
    <h1 class="logoH1">
      <router-link class="header-left" to="/">
        <img src="~img/ymtCenter_IMG_03.png" alt="原仓授权一码通" />
      </router-link>
    </h1>
    <div class="header-rightbox">
      <div class="userbtn">
        <div class="yc3search_box2" @mouseenter="mouseOver" @mouseleave="mouseLeave">
          <div class="ylh_userbox2">
            <div class="yc3-center-imgbox">
              <img src="~img/indexlogin-sign_03.png" @click="toIndex">
              <div class="hoverwrap">
                <div style="height:10px;"></div>
                <div class="divbox">
                  <div class="divbox2" :class="oheight">
                    <div class="divtop">
                      <!-- <a href="/beian/newInfo.shtml">
                          <img src="/static/img/header_addsgin_03.png"/>
                          <span>新增备案</span>
                      </a> -->
                    </div>
                    <div class="center-linkbox">
                      <div class="yih-quit">
                        <el-button class="elbtn" type="text" @click.stop="open">退出登录</el-button>
                      </div>
                    </div>
                    <div class="ylh2-divbottom"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-linkbox">
      <router-link class="link" to="/">
        首页
      </router-link>
      <a class="link" target="_blank" href="https://www.yuancangipr.com">
        版权登记
      </a>
      <a class="link" href="https://www.ipyimatong.com/web/usercase/usercase.jsp">
        客户案例
      </a>
      <a class="link" target="_blank" href="https://www.ipyimatong.com/web/helpbook/_book/index.html">
        使用手册
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserHeader',
  data () {
    return {
      oheight: ''
    }
  },
  methods: {
    mouseOver () {
      this.oheight = 'hactive'
    },
    mouseLeave () {
      this.oheight = ''
    },
    toIndex () {
      this.$router.push('/userindex')
    },
    open () {
      this.$confirm('确定退出吗？', '退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'layoutWrapper',
        type: ''
      }).then(() => {
        this.$store.dispatch('UserLogout')
        //  跳到目标页
        this.$router.push('/login')
      }).catch(() => {})
    }
  }
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl'
.layoutWrapper {
  width: 410px;
  height: 250px;
  border: 4px solid #fff;
  border-radius: 8px;
}
.layoutWrapper .el-message-box__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.layoutWrapper .el-message-box__header .el-message-box__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.layoutWrapper .el-message-box__header .el-message-box__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.layoutWrapper .el-message-box__header .el-message-box__headerbtn .el-message-box__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.layoutWrapper .el-message-box__content {
  position: relative;
  padding: 0;
  color: #333333;
  font-size: 14px;
}
.layoutWrapper .el-message-box__message p {
  padding-top: 12px;
  font-size: 16px;
  line-height: 106px;
  height: 118px;
  text-align: center;
}
.layoutWrapper .el-message-box__btns {
  padding: 0 70px;
  text-align: center;
}
.layoutWrapper .el-message-box__btns .el-button {
  width: 120px;
  height: 40px;
  padding: 0;
  text-align: center;
  float: right;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
}
.layoutWrapper .el-button:focus,.layoutWrapper .el-button:hover {
  color: #333333;
  border-color: #E6E6E6;
  background-color: #fff;
}
.layoutWrapper .el-message-box__btns .el-button--primary {
  color: #FFF;
  background-color: $baseColor;
  border-color: $baseColor;
  float: left;
  margin-left: 0;
  margin-right: 20px;
}
.loginBadWrap .el-button--primary {
  color: #FFF;
  background-color: $baseColor;
  border-color: $baseColor;
}
</style>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@keyframes mymove
{
  from {height:0px;}
  to {height:104px;}
}
.logoH1
  float left
  margin 0
  overflow hidden
.header
  width 100%
  min-width 1180px
  height 70px
  position fixed
  left 0
  top 0
  right 0
  margin 0 auto
  z-index 3
  box-shadow -5px 2px 5px #e5e6ec
  background-color $bgCfff
  .header-left
    width 190px
    margin 15px 0 0 23px
    float left
    img
      width 100%
  .header-rightbox
    width 256px
    height 70px
    float right
    .userbtn
      margin-right 45px
      height 32px
      margin-top 19px
      float right
      .yc3search_box2
        height 32px
        line-height 32px
        float right
        font-size 0
        .ylh_userbox2
          width 32px
          height 32px
          font-size 0
          float left
          .yc3-center-imgbox
            display table-cell
            width 32px
            height 32px
            border-radius 32px
            line-height 32px
            vertical-align middle
            cursor pointer
            font-size 0
            position relative
            img
              display inline-block
              vertical-align middle
              max-width 100%
              max-height 100%
              width auto
              height auto
            .hoverwrap
              min-height 122px
              width 129px
              position absolute
              left -51px
              top 27px
              display none
              .divbox
                min-height 0px
                background-color transparent
                width 129px
                .divbox2
                  height 0px
                  overflow hidden
                  width 129px
                  .divtop
                    height 19px
                    width 129px
                    background url('~img/indexuc_hover_bg_03.png') left top no-repeat
                    background-size: 129px 19px
                  .center-linkbox
                    min-height 35px
                    background url('~img/indexuc_hover_bg_06.png') left top repeat-y
                    background-size 129px 6px
                    padding 0 19px 0 20px
                    .yih-setbtn
                      height 36px
                      line-height 30px
                      position relative
                      text-align center
                      padding-bottom 5px
                      margin-bottom 5px
                      border-bottom 1px solid #eee
                    a
                      text-decoration none
                      color $baseColor
                      font-size 14px
                    .yih-quit
                      height 34px
                      position relative
                      text-align center
                      .elbtn
                        color $baseColor
                        line-height 34px
                        height 34px
                        width 100%
                        text-align center
                        padding 0
                        border 0
                  .ylh2-divbottom
                    height 10px
                    width 129px
                    background url('~img/indexuc_hover_bg_08.png') left top no-repeat
                    background-size 129px 10px
                .hactive
                  animation mymove 500ms 1
                  height 104px
    .userbtn
      .yc3search_box2:hover
        .ylh_userbox2
          .yc3-center-imgbox
            .hoverwrap
              display block
  .header-linkbox
    height 36px
    float right
    margin-right 2px
    margin-top 17px
    .link
      font-size 15px
      font-weight 600
      line-height 32px
      color #333
      margin-left 40px
      float left
      border-bottom 4px solid #FFFFFF
      transition border-bottom 400ms
    .link:first-child
      margin-left 0
    .link:hover
      border-bottom 4px solid $baseColor
      color $baseColor
</style>
